<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/30
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>欢迎二次元用户</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="<%=request.getContextPath()%>/static/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/css/bootstrap.css" />
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <link href="<%=request.getContextPath()%>/template/css/base.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/template/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/button.css" />
    <script type="text/javascript">
        var system ={};
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
        if(system.win||system.mac||system.xll){//如果是电脑跳转到
            window.location.href="#";
        }else{  //如果是手机,跳转到
            window.location.href="${pageContext.request.contextPath}/index.jsp";
        }
    </script>

</head>
<body>
<header>
    <!-- 头像 -->
    <div class="top-section col-md-6" id="headPicture">
        <div class="profile-image col-md-6">
            <a href="${pageContext.request.contextPath}/user/userDetails">
                <img src="${user.picture}" class="img-circle center-block" width="80px" height="80px">
            </a>
        </div>
        <div class="profile-content col-md-6">
            <h3 class="profile-title text-center">${user.userName}</h3>
            <h4 class="profile-description text-center">${user.signature}</h4>
        </div>
    </div>

    <button class="btn btn-danger col-md-1.5" id="logout" style="margin-top: 23px">
        <span class="glyphicon glyphicon-off"></span>退出登录
    </button>

    <nav class="nav col-md-4 topnav" id="topnav">
        <a href="${pageContext.request.contextPath}/anime/animeUser"><span>首页</span><span class="en">index</span></a>
        <a href="${pageContext.request.contextPath}/user/userDetails"><span>编辑个人资料</span><span class="en">Life</span></a>
    </nav>
</header>

    <article>
        <h2 class="title_tj">
            <p><span>动漫列表</span></p>
        </h2>
        <div class="bloglist center" id="allList">


        </div>

        <%--    分页--%>
        <div class="row">
            <div class="col-md-6" id="page_info_area">

            </div>
            <div class="col-md-6" id="page_nav_area">

            </div>

        </div>


        <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6574585" ></script>
        <script type="text/javascript" id="bdshell_js"></script>
    </article>

    <footer>
        <img src="<%=request.getContextPath()%>/static/img/1026.jpg" width="100%" height="200px">
    </footer>

<!--增加、修改、查看详情弹框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">查看详情</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" id="Form" enctype="multipart/form-data">

                    <div class="form-group" style="display: none;">
                        <label for="animeId" class="col-sm-3 control-label">动漫ID：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" placeholder="" name="animeId" id="animeId">
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="animeName" class="col-sm-3 control-label">动漫名：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入动漫名" name="animeName" id="animeName" disabled="disabled">
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="animeIntro" class="col-sm-3 control-label">动漫简介：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入动漫简介" name="animeIntro" id="animeIntro" disabled="disabled">
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="updateNum" class="col-sm-3 control-label">动漫更新集数：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入更新集数" name="updateNum" id="updateNum" disabled="disabled">
                        </div>

                    </div>


                    <div class="form-group">
                        <label for="animeSum" class="col-sm-3 control-label">动漫总集数：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="动漫总集数" name="animeSum" id="animeSum" disabled="disabled">
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="isEnd" class="col-sm-3 control-label">是否完结：</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="isEnd" id="isEnd" disabled="disabled">
                                <option value="0">未完结</option>
                                <option value="1">已完结</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="typeId" class="col-sm-3 control-label">动漫类型：</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="typeId" id="typeId" disabled="disabled">

                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="regionId" class="col-sm-3 control-label">发行地区：</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="regionId" id="regionId" disabled="disabled">

                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="isMember" class="col-sm-3 control-label">是否会员：</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="isMember" id="isMember" disabled="disabled">
                                <option value="0">非会员</option>
                                <option value="1">会员</option>
                            </select>
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="isPutaway" class="col-sm-3 control-label">上架状态：</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="isPutaway" id="isPutaway" disabled="disabled">
                                <option value="0">已下架</option>
                                <option value="1">已上架</option>
                            </select>
                        </div>

                    </div>

                    <div class="form-group divHide">
                        <label for="putawayTime" class="col-sm-3 control-label">上架时间：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" placeholder="" name="putawayTime" id="putawayTime" disabled="disabled">
                        </div>


                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary save" id="save">确定</button>
                <button type="button" class="btn btn-primary update " style="display: none;">修改</button>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    $(function () {
        to_page(1);

        //弹窗部分
        $('#exampleModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var recipient = button.data('whatever');

            var modal = $(this);
            modal.find('.modal-title').text(recipient);
//				modal.find('.modal-body input').val(recipient);
        })


        //退出登录
        $(document).on("click", "#logout", function() {
            if(confirm('是否要退出登录？')) {
                $.get(
                    "${pageContext.request.contextPath}/user/logout",
                    function(data) {
                        window.location.reload();
                    }, "json")
            }
        })

        /*查看操作*/
        $(document).on("click", "#see", function() {
            var animeMember = $(this).prev("p").data("id");
            console.log("animeMember:"+animeMember);

            var userMember =${user.isMember};
            console.log("userMember:"+userMember);

            var animeId = $(this).data("id");
            console.log("animeId:"+animeId);

            if (animeMember<1){
                $.ajax({
                    type: "POST",
                    data: {animeId:animeId},
                    url: "${pageContext.request.contextPath}/anime/animeBy",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        //将后台返回的数据给对应的表单元素赋值
                        $("#animeId").val(data.data.animeId);
                        $("#animeName").val(data.data.animeName);
                        $("#animeIntro").val(data.data.animeIntro);
                        $("#updateNum").val(data.data.updateNum);
                        $("#animeSum").val(data.data.animeSum);
                        $("#isEnd").val(data.data.isEnd);
                        $("#typeId").val(data.data.typeId);
                        $("#regionId").val(data.data.regionId);
                        $("#isMember").val(data.data.isMember);
                        $("#isPutaway").val(data.data.isPutaway);
                        $("#putawayTime").val(data.data.putawayTime);
                    }
                })

                $('#exampleModal').modal('show');
            }else if(animeMember>0 && userMember>0){
                $.ajax({
                    type: "POST",
                    data: {animeId:animeId},
                    url: "${pageContext.request.contextPath}/anime/animeBy",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        //将后台返回的数据给对应的表单元素赋值
                        $("#animeId").val(data.data.animeId);
                        $("#animeName").val(data.data.animeName);
                        $("#animeIntro").val(data.data.animeIntro);
                        $("#updateNum").val(data.data.updateNum);
                        $("#animeSum").val(data.data.animeSum);
                        $("#isEnd").val(data.data.isEnd);
                        $("#typeId").val(data.data.typeId);
                        $("#regionId").val(data.data.regionId);
                        $("#isMember").val(data.data.isMember);
                        $("#isPutaway").val(data.data.isPutaway);
                        $("#putawayTime").val(data.data.putawayTime);
                    }
                })

                $('#exampleModal').modal('show');
            }else{
                alert("该动漫需要会员！您还不是会员");
            }


        })

        //显示动漫类型
        $.get(
            "${pageContext.request.contextPath}/type/allAnimeTypeList",
            function(data) {
                console.log(data);

                var op = "";
                $.each(data.data, function(index, item) {
                    op += '<option value="' + item.typeId + '">' + item.typeName + '</option>'
                });

                $("#typeId").append(op);
            }, "json")

        //显示发行地区
        $.get(
            "${pageContext.request.contextPath}/region/allAnimeRegionList",
            function(data) {
                console.log(data);

                var op = "";
                $.each(data.data, function(index, item) {
                    op += '<option value="' + item.regionId + '">' + item.regionName + '</option>'
                });

                $("#regionId").append(op);
            }, "json")


    })

    function appendHtml(result) { //此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        $("#allList").empty();//清空上一页的数据
        console.log(result);
        //遍历json数据
        var div = "";
        $.each(result.pageInfo.list, function(index, item) {
            div +='<div class="col-md-8">';

            div += '<h3>'+item.animeName+'</h3>';
            div +='<div class="col-md-6">';
            div +='<figure><img src="'+item.picture+'" width="200px" height="200px" /></figure>';
            div +="</div>";

            div +='<div class="col-md-6">';

            div +='<ul>';
            div +='<h4>'+item.animeIntro+'</h4>';
            div +='<p style="display: none" id="animeMember" data-id="'+item.isMember+'">'+item.isMember+'</p>'
            div +='<button class="btn btn-warning" data-id="'+item.animeId+'" data-toggle="modal" data-whatever="动漫详情" id="see"><span class="glyphicon glyphicon-remove"></span>查看详情</button>';
            div +='</ul>';

            div +="</div>";


            div +="</div>";
            div +="<br/>";
        });

        $("#allList").append(div);
    }

    function to_page(pn) {
        $.ajax({
            url:"${pageContext.request.contextPath}/anime/animeList",
            data:"pn="+pn,
            type:"GET",
            success:function (result) {
                appendHtml(result);
                build_page_nav(result);
            }
        });

    }

    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageli =  $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageli.addClass("disabled");
        }else {
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageli.click(function () {
                to_page(result.pageInfo.pageNum -1);
            });
        }



        var nextPageli =  $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.pageInfo.hasNextPage == false){
            nextPageli.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageli.click(function () {
                to_page(result.pageInfo.pageNum +1);
            });

            lastPageLi.click(function () {
                to_page(result.pageInfo.pages);
            });
        }

        ul.append(firstPageLi).append(prePageli)
        $.each(result.pageInfo.navigatepageNums,function (index,item) {

            var numLi =  $("<li></li>").append($("<a></a>").append(item));
            if(result.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageli).append(lastPageLi);

        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

</script>
</html>
